<template>
  <div class="main">
    <el-card>
      <el-form ref="wareFormRef" :inline="true" :model="ruleForm" :rules="rules" class="warehouse-info" :label-position="labelPosition">
        <el-form-item label="仓库编号">
          <el-input v-model="ruleForm.code" placeholder="请输入" class="ipt" :disabled="true" />
          <!-- 仓库名称 -->
        </el-form-item>
        <el-form-item prop="name" label="仓库名称">
          <el-input v-model="ruleForm.name" placeholder="请输入" class="ipt" />
        </el-form-item>
        <!-- 仓库类型 -->
        <el-form-item class="no" prop="type" label="仓库类型">
          <div class="tit">
            <el-select v-model="ruleForm.type" placeholder="请选择" class="ipt">
              <el-option label="中转仓" value="ZZ" />
              <el-option label="加工仓" value="JG" />
              <el-option label="储备仓" value="CB" />
              <el-option label="冷藏仓" value="LC" />
            </el-select>
          </div></el-form-item>
        <!--  省/市/区-->
        <el-form-item prop="location" label="省/市/区">
          <el-cascader
            v-model="selectedOptions"
            :options="options"
            placeholder="请选择"
            style="width:575px"
            @change="handleChange"
          />
        </el-form-item>
        <!--  详细地址-->
        <el-form-item label="详细地址">
          <el-input v-model="ruleForm.address" placeholder="请输入" style="width:575px" />
        </el-form-item>
        <!-- 仓库状态 -->
        <el-form-item prop="status" label="仓库状态">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="0">停用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 仓库面积 -->
        <el-form-item label="仓库面积">
          <el-input v-model="ruleForm.surface" placeholder="请输入" class="ipt" />
        </el-form-item>
        <!-- 负责人 -->
        <el-form-item prop="personName" label="负责人">
          <el-input v-model="ruleForm.personName" placeholder="请输入" class="ipt" />
        </el-form-item>
        <!-- 联系电话 -->
        <el-form-item class="no" label="联系电话">
          <el-input v-model="ruleForm.phone" placeholder="请输入" class="ipt" />
        </el-form-item>
        <el-form-item class="btm">
          <el-button round @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" round @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { regionData, TextToCode, CodeToText } from 'element-china-area-data'

import { editList } from '@/api'
export default {
  data() {
    return {
      labelPosition: 'top',
      options: regionData, // 使用中国省市区数组
      selectedOptions: [], // 店铺地址数组
      rule: [

      ],
      ruleForm: {
        // formInline: {
        // },
        code: '',
        name: '',
        type: '',
        address: '',
        location: '',
        status: '',
        surface: '',
        personName: '',
        phone: ''

      },
      hireMap: {
        0: '停用',
        1: '启用'
      },
      rules: {
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择仓库类型', trigger: 'blur' }

        ],
        location: [
          { required: true, message: '请选择区域', trigger: 'blur' }

        ],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }

        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }

        ]
      }
    }
  },
  created() {
    this.ruleForm = this.$route.query.row
    // this.ruleForm.status = this.hireMap[+this.$route.query.row.status]
    const arr = this.$route.query.row.location.split('/')
    this.selectedOptions = [TextToCode[arr[0]].code, TextToCode[arr[0]][arr[1]].code, TextToCode[arr[0]][arr[1]][arr[2]].code]
    console.log(this.selectedOptions)
    console.log(this.$route.query)
  },
  methods: {
    // 城市选择文字转换
    handleChange(val) {
      this.ruleForm.location = `${CodeToText[val[0]]}/${CodeToText[val[1]]}/${CodeToText[val[2]]}`
    },
    // 提交
    submit() {
      console.log(this.ruleForm)
      this.$refs.wareFormRef.validate(async(valid) => {
        if (!valid) return
        await editList(this.ruleForm)
        this.$message.success('恭喜你，提交成功')
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.tit{
    color: #887e7e;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  span{
    color: red;
  }
}

.main{
min-width: 1000px;
    min-height: calc(100vh - 50px);
  background-color: #fdfafa;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 25px;
  .el-form-item{
    margin-right: 40px;
  }
  ::v-deep .el-form-item__label {
    color: #887e7e;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  margin-bottom: -10px;
}
  .no{
    margin-right: 0;
  }
  .ipt{
    width: 265px;
  }
  .el-button{
    width: 170px;
    height: 40px;
  }
  .btm{
    width: 100%;
    border-top: 1px solid #f5efee;;
// margin-left: 300px;
   margin-top: 10px;
    padding-top: 30px;
    padding-left: 290px;

  }
}
</style>>

